import React from "react";
import GeneralCard from "../GeneralCard";
import echarts from "echarts";
import resource from "@/utils/resource";
import api from "@/utils/api";

class LineChart extends React.Component {
    params = {
        type: "total",
        startTime: "2018-03-04",
        endTime: "2019-03-04"
    };

    componentDidMount() {
        this.initMapChart();
    }

    componentWillUnmount() {
        echarts.dispose(document.getElementById(this.props.instance));
    }

    initMapChart = () => {
        this.echarts = echarts.init(document.getElementById(this.props.instance), {});
        this.fetchData();
    };

    updateCharts = data => {
        this.echarts.setOption(this.getChartsOption(data));
    };

    getChartsOption = data => {
        const legendData = [];
        const xAxisData = [];
        const series = [];

        data.forEach((item, index) => {
            legendData.push(item.type);
            if (!index) {
                item.data.forEach(i => {
                    xAxisData.push(i.time);
                });
            }
            series.push({
                name: item.type,
                type: "line",
                smooth: true,
                // stack: "总量",
                data: item.data.map(i => i.count)
            });
        });

        return {
            color: ["#47B5FF", "#47BF9A", "#E0D0A2"],
            tooltip: {
                trigger: "axis"
            },
            legend: {
                right: 0,
                textStyle: {
                    color: "#8893A7"
                },
                data: legendData
            },
            grid: {
                left: "3%",
                right: "3%",
                bottom: "3%",
                containLabel: true
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: xAxisData,
                axisLine: {
                    lineStyle: {
                        color: "#8893A7"
                    }
                }
            },
            yAxis: {
                type: "value",
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "#8893A7"
                    }
                }
            },
            series: series
        };
    };

    fetchData = () => {
        const params = { ...this.params };
        resource.get(api.analysisAppStatisticNumber, params).then(this.updateCharts);
    };

    handleDateChange = e => {
        console.log(e);
        this.fetchData();
    };
    handleAppTypeChange = e => {
        console.log(e);
        this.fetchData();
    };

    render() {
        return (
            <GeneralCard
                title={this.props.title}
                onDateChange={this.handleDateChange}
                onAppTypeChange={this.handleAppTypeChange}
            >
                <div id={this.props.instance} style={{ width: "100%", height: "100%" }} />
            </GeneralCard>
        );
    }
}

export default LineChart;
